<template>
  <div>
    <div style="width: 100%; height: 50px" v-if="arr.length > 0"></div>
    <!-- <div
      class="ele-bottom-tool"
      style="padding-right: 40px"
      v-if="arr.length > 0"
    >
      <div class="ele-bottom-tool-actions">
        <a-space size="small">
          <div v-for="item in arr" :key="item.url">
            状态:-2删除，-1作废，0草稿，1审核中，2审核通过，3审核驳回
            <template v-if="props.receiptsDetail.status == -1">
              <a-button v-if="item.type == 'delete'" @click="action(item)">{{
                item.name
              }}</a-button>
            </template>
            <template v-if="props.receiptsDetail.status == 0">
              <a-button
                type="primary"
                v-if="
                  item.type == 'cancel' ||
                  item.type == 'confirm' ||
                  item.type == 'reject' ||
                  item.type == 'report' ||
                  item.type == 'continue' ||
                  item.type == 'agree'
                "
                @click="action(item)"
              >
                {{ item.name }}
              </a-button>
            </template>
            <template v-if="props.receiptsDetail.status == 1">
              <a-button
                type="primary"
                v-if="item.type == 'verify' || item.type == 'cancel_verify'"
                @click="action(item)"
                >{{ item.name }}</a-button
              >
            </template>
            <template v-if="props.receiptsDetail.status == 2">
              <a-button
                type="primary"
                v-if="item.type == 'back_verify'"
                @click="action(item)"
                >{{ item.name }}</a-button
              >
            </template>
            <template v-if="props.receiptsDetail.status == 3">
              <a-button
                type="primary"
                v-if="item.type == 'cancel' || item.type == 'confirm'"
                @click="action(item)"
                >{{ item.name }}</a-button
              >
            </template>
          </div>
        </a-space>
      </div>
    </div> -->
    <div
      class="ele-bottom-tool"
      style="padding-right: 40px"
      v-if="arr.length > 0"
    >
      <div class="ele-bottom-tool-actions">
        <a-space size="small">
          <div v-for="item in arr" :key="item.url">
            <!-- 状态:-2删除，-1作废，0草稿，1审核中，2审核通过，3审核驳回 -->
            <a-button type="primary" @click="action(item)">{{
              item.name
            }}</a-button>
          </div>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps({
    btnarr: Array,
    receiptsDetail: Object
  });

  const emit = defineEmits(['bottomAction']);

  const arr = ref([]);

  watch(
    () => [props.receiptsDetail],
    (newValue) => {
      /* 状态:-2删除，-1作废，0草稿，1审核中，2审核通过，3审核驳回 */
      let rules = [
        {
          status: -1,
          typeArr: ['delete']
        },
        {
          status: 0,
          typeArr: [
            'cancel',
            'confirm',
            'reject',
            'report',
            'continue',
            'agree'
          ]
        },
        {
          status: 1,
          typeArr: ['verify', 'cancel_verify']
        },
        {
          status: 2,
          typeArr: ['back_verify', 'collect']
        },
        {
          status: 3,
          typeArr: ['cancel', 'confirm']
        }
      ];
      arr.value = [];
		if(props.btnarr && props.btnarr.length > 0){
		  props.btnarr.forEach((item) => {
			if (hasPermission(item.url) && item.type != 'edit') {
			  rules.forEach((m) => {
				if (
				  props.receiptsDetail.status == m.status &&
				  m.typeArr.indexOf(item.type) >= 0
				) {
				  arr.value.push(item);
				}
			  });
			}
		  });
		}
    }
  );
  const action = (item) => {
    emit('bottomAction', item);
  };

  /* 判断是否有某个权限*/
  const hasPermission = (value) => {
    const userStore = useUserStore();
    return arrayHas(userStore?.authorities, value);
  };
  /* 判断数组是否有某些值 */
  const arrayHas = (array, value) => {
    if (!value) {
      return true;
    }
    if (!array) {
      return false;
    }
    if (Array.isArray(value)) {
      for (let i = 0; i < value.length; i++) {
        if (array.indexOf(value[i]) === -1) {
          return false;
        }
      }
      return true;
    }
    return array.indexOf(value) !== -1;
  };
</script>

<style></style>
